<template>
  <div>
    <p>Message: {{ message }}</p>
    <button @click="logMessage">Log It</button>
    <button @click="handleClick">Update Name</button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const message = ref('Hello from LogMsg')
const logMessage = () => {
  console.log(message.value)
}

defineExpose({
  message,
  logMessage,
})

// 1. parent ==> son
// transitive value
// defines the types of values that can be accepted
type Currency = {
  name: string
  rate?: number
}

// const props = defineProps<Currency>()
// Set the default value of the field
const props = withDefaults(defineProps<Currency>(), {
  rate: 10,
})
console.log(props.name)
console.log(props.rate)

// 2. son ==> parent
type Emits = (s: 'msg', msg: string) => void

const emit = defineEmits<Emits>()
const handleClick = () => {
  emit('msg', 'test son value')
}
</script>
